<!--
 * @Description: errorList- 错题集
 * @Author: your name
 * @Date: 2024-01-29
 * @LastEditTime: 2024-01-29
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="errorList heart_w">
      <div class="recordlist">
        <!-- 单选题 -->
        <div class="itembox" v-for="item in errorList" :key="item.tid">
          <div class="index_type">
            <span v-if="item.case_content">案例分析题</span>
            <span v-else>单项选择题123</span>
          </div>

          <div class="index_commonTiMu">
            <p v-html="item.case_content"></p>
          </div>

          <!-- 案例分析题 -->
          <div
            class="index_questionList"
            v-for="item_list in item.list"
            :key="item_list.tid"
            v-show="item.case_content"
          >
            <div class="index_questionTitle">
              <div class="titnum">1</div>
              <div class="icons">
                <div class="jiucuo">纠错</div>
                <div class="questionask">提问</div>
                <div class="questioncollect active">已收藏</div>
                <!-- <div class="questioncollect">收藏</div> -->
                <div class="questiondelete">移除错题</div>
              </div>
            </div>
            <div class="index_questionCon">
              <div class="index__commonTiMu">
                <p v-html="item_list.title"></p>
                {{ item_list.tid }}
              </div>
              <div class="options">
                <!-- active -->
                <div
                  v-for="(option, index) in 4"
                  :key="index"
                  class="optionBox"
                  @click="chose_answer(item.position, item, index)"
                >
                  <div class="option">
                    {{ letterarr[index] }}
                  </div>
                  <div class="optionText">{{ option }}123123123213123</div>
                </div>
              </div>
              <div class="analysisBox">
                <img src="@/assets/images/icon_no.png" alt="" />
                <img src="@/assets/images/icon_yes.png" alt="" />
                <span>
                  您的答案： <i class="error">B</i>
                  <i class="correct" style=""></i>
                  <i
                    class="error-null"
                    style="margin-left: 10px; display: none"
                  >
                    未作答
                  </i>
                </span>
                <span>正确答案：<i class="correct">A</i></span>
              </div>
              <div class="choseanalysis">
                <p>答案解析：</p>
                <div class="KeyAalysisCenter">2</div>
              </div>
            </div>
          </div>

          <!-- 单选题 -->
          <div class="index_questionList" v-if="!item.case_content">
            <div class="index_questionTitle">
              <div class="titnum">1</div>
              <div class="icons">
                <div class="jiucuo">纠错</div>
                <div class="questionask">提问</div>
                <div class="questioncollect" :class="{ active: true }">
                  {{ '已收藏' }}
                </div>
                <div class="questioncollect">收藏</div>
                <div class="questiondelete">移除错题</div>
              </div>
            </div>
            <div class="index_questionCon">
              <div class="index__commonTiMu">
                <p v-html="item.title"></p>
              </div>
              <div class="options">
                <!-- active -->
                <div
                  v-for="(option, index) in 4"
                  :key="index"
                  class="optionBox"
                  @click="chose_answer(item.position, item, index)"
                >
                  <div class="option">
                    {{ letterarr[index] }}
                  </div>
                  <div class="optionText">{{ option }}123123123213123</div>
                </div>
              </div>
              <div class="analysisBox">
                <img src="@/assets/images/icon_no.png" alt="" />
                <img src="@/assets/images/icon_yes.png" alt="" />
                <span>
                  您的答案： <i class="error">B</i>
                  <i class="correct" style=""></i>
                  <i
                    class="error-null"
                    style="margin-left: 10px; display: none"
                  >
                    未作答
                  </i>
                </span>
                <span>正确答案：<i class="correct">A</i></span>
              </div>
              <div class="choseanalysis">
                <p>答案解析：</p>
                <div class="KeyAalysisCenter">2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTopicInfoByError } from '@/api/proErrorClass'
export default {
  name: 'errorList',
  data() {
    return {
      errorList: [
        {
          case_id: 1768,
          case_content:
            '<div><span style="font-family:Arial;font-size:16px;">Company C owns a 50% interest in a joint venture, JVC, and accounts for it using the&nbsp;</span><span style="font-family:Arial;font-size:16px;">equity method. JVC’s assets and liabilities have a book value equal to their fair value.&nbsp;</span><span style="font-family:Arial;font-size:16px;">They have each reported the following 2024 financial results.</span></div><p><img src="https://img.rongyuejiaoyu.com/uploads/20231110/e1303d95b9bfb328785445c6791e037d.png" alt="" /></p>',
          list: [
            {
              tid: 72254,
              cid: 10577,
              qst_type: 1,
              t_type: 1,
              is_case: 1,
              id: 71997,
              title:
                '<p><span style="font-family:Arial;font-size:16px;">Assuming consolidation using the acquisition method, Company C’s stockholders’&nbsp;</span><span style="font-family:Arial;font-size:16px;">equity at the end of 2024 is closest to:</span></p>',
              answer: 2,
              is_multi: '0',
              level: '1',
              op4: '',
              analysis:
                '<p><span style="font-family:Arial;font-size:16px;">B&nbsp;</span></p><p><span style="font-family:Arial;font-size:16px;">Company C would include minority interest (50% of $800) along with its own&nbsp;</span><span style="font-family:Arial;font-size:16px;">equity of $5,950 in the consolidated financial statements.</span></p>',
              caseid: 1768,
              vod_analysis: '',
              ms_analysis: '',
              is_true: 1,
              is_collection: true,
              op: ['$5,950.', '$6,350.', '$6,750.'],
              chooseAnswerNums: -1,
              isChoose: false,
              one: 1,
              options: ['$5,950.', '$6,350.', '$6,750.']
            },
            {
              tid: 72255,
              cid: 10577,
              qst_type: 1,
              t_type: 1,
              is_case: 1,
              id: 71998,
              title:
                '<p><span style="font-family:Arial;font-size:16px;">Assuming consolidation using the acquisition method, Company C’s total assets at&nbsp;</span><span style="font-family:Arial;font-size:16px;">the end of 2024 is closest to:</span></p>',
              answer: 3,
              is_multi: '0',
              level: '1',
              op4: '',
              analysis:
                '<p><span style="font-family:Arial;font-size:16px;">C&nbsp;</span></p><p><span style="font-family:Arial;font-size:16px;">Company C would include all the assets of JVC and remove its equity&nbsp;</span><span style="font-family: Arial;">investment in the consolidated balance sheet. $13,450 − $400 + $4,400 =&nbsp;</span><span style="font-family: Arial;">$17,450.</span></p>',
              caseid: 1768,
              vod_analysis: '',
              ms_analysis: '',
              is_true: 1,
              is_collection: false,
              op: ['$15,250.', ' $15,650.', '$17,450.'],
              chooseAnswerNums: -1,
              isChoose: false,
              one: 1,
              options: ['$15,250.', ' $15,650.', '$17,450.']
            },
            {
              tid: 72256,
              cid: 10577,
              qst_type: 1,
              t_type: 1,
              is_case: 1,
              id: 71999,
              title:
                '<p><span style="font-family:Arial;font-size:16px;">Assuming proportionate consolidation, Company C’s cost of goods sold and net&nbsp;</span><span style="font-family:Arial;font-size:16px;">income for the year ended 2024 are closest to:</span></p><p><img src="https://img.rongyuejiaoyu.com/uploads/20231110/fd1ec7f3c2005f4832ab6042a75015c0.png" alt=""/></p>',
              answer: 1,
              is_multi: '0',
              level: '1',
              op4: '',
              analysis:
                '<p><span style="font-family:Arial;font-size:16px;">A&nbsp;</span></p><p><span style="font-family:Arial;font-size:16px;">COGS = $7,000 Company C + 50% of $2,000 JVC = $8,000.</span></p><p><span style="font-family:Arial;font-size:16px;">Net income of $930 is not affected by proportionate consolidation.</span></p>',
              caseid: 1768,
              vod_analysis: '',
              ms_analysis: '',
              is_true: 1,
              is_collection: false,
              op: ['A', 'B', 'C'],
              chooseAnswerNums: -1,
              isChoose: false,
              one: 1,
              options: ['A', 'B', 'C']
            }
          ],
          count: 3
        },
        {
          tid: 72626,
          cid: 10617,
          qst_type: 1,
          t_type: 1,
          is_case: 0,
          id: 72369,
          title:
            '<p>Titan Industries is not expected to pay a dividend until ten years from now, at which time it is expected to pay a dividend of $1.25 and increase the dividend at a rate of 4% thereafter. If the required rate of return is 12%, the current value of Titan is closest to:</p>',
          answer: 1,
          is_multi: '0',
          level: '1',
          op4: '',
          analysis:
            '<p>A&nbsp;</p><p>We calculate the value of the expected cash flows at nine years because the formula uses the value of the dividend of t + 1 and then discounts that value to the present at the required rate of return of 12%.</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20240128/1706427505113430.png" title="1706427505113430.png" alt="image.png"/></p>',
          caseid: 0,
          vod_analysis: '',
          ms_analysis: '',
          sug_level: 0,
          thinking: '',
          is_true: 1,
          is_collection: true,
          caseinfo: null,
          op: ['$5.64.', '$12.78.', '$15.63.'],
          chooseAnswerNums: -1,
          isChoose: false,
          one: 1,
          options: ['$5.64.', '$12.78.', '$15.63.']
        }
      ],
      topicObj: {},
      letterarr: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    }
  },
  created() {
    console.log(this.errorList[0].list.length)
    this.getInfoTopic()
  },
  methods: {
    async getInfoTopic() {
      let params = {
        log_id: 1,
        cid: 1, // 二级ID
        tid: 4 // 题ID :案例 1 单选 2多选 3判断 4 填空 5问答 6 case
      }
      const { data: data } = await getTopicInfoByError(params)
      this.topicObj = data.data
      console.log(data)
    },
    chose_answer() {}
  }
}
</script>

<style scoped lang="scss">
.errorList {
  margin-top: 40px;
  margin-bottom: 40px;
}

.recordlist {
  min-height: 500px;
  background: #fff;
  padding: 5px 35px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

.index_type {
  font-size: 16px;
  color: #333;
  line-height: 16px;
  background: #fff;
  width: 100%;
  padding: 30px 0 20px;
  font-family: 'Microsoft Yahei';

  &::before {
    content: ' ';
    display: block;
    width: 4px;
    height: 16px;
    background: #47c88a;
    margin-right: 20px;
    float: left;
  }
}

.itembox {
  .index_questionList {
    padding: 10px 30px 20px;
    background: #fff;
  }

  .index_questionTitle {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .questiondelete {
      background: url('@/assets/images/error_cuot.png') no-repeat 0;
    }

    .titnum {
      width: 26px;
      height: 30px;
      line-height: 21px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      background: url('@/assets/images/titnum.png') no-repeat center center;
      background-size: contain;
    }

    .titnum + div {
      display: flex;

      div:first-child {
        background: url('@/assets/images/jiucuo.png') no-repeat 0;
      }

      div:nth-child(2) {
        background: url('@/assets/images/ti_wen.png') no-repeat 0;
      }

      .questioncollect {
        background: url('@/assets/images/cancel.png') no-repeat 0;
      }
      .questioncollect.active {
        background: url('@/assets/images/collect.png') no-repeat 0;
      }

      div {
        user-select: none;
        padding-left: 10px;
        margin-left: 15px;
        cursor: pointer;
        font-size: 14px;
        color: #666;
        line-height: 30px;
        text-indent: 10px;
      }
    }
  }
  .index_questionCon {
    .index__commonTiMu {
      padding: 15px 0 11px;
      clear: both;
      word-wrap: break-word;
      font-size: 16px;
      color: #333;
      line-height: 24px;

      p {
        font-size: 18px !important;
        font-weight: bold;
      }
    }

    .analysisBox {
      overflow: hidden;
      background: #fafafa;
      margin: 30px 0 25px -30px;
      padding: 15px 30px;
      width: 100%;
      font-size: 14px;
      color: #999;
      box-sizing: content-box;

      img {
        width: 18px;
        height: 18px;
        margin-right: 17px;
        vertical-align: middle;
      }

      span {
        margin-right: 15px;
        display: inline-block;
        vertical-align: middle;
        i {
          font-style: normal;
        }

        .error {
          color: #ff4e4e;
        }

        .correct {
          color: #47c88a;
        }
      }
    }

    .choseanalysis {
      p {
        font-size: 14px;
        color: #999;
        width: 80px;
        line-height: 22px;
        margin-top: 25px;
        clear: both;
      }
    }

    .optionBox:hover {
      background-color: #fafafa;
    }

    .optionBox {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 5px 0;
      padding-left: 5px;
      cursor: pointer;

      .option {
        width: 26px;
        height: 26px;
        background-color: #ededed;
        border-radius: 50%;
        font-size: 14px;
        color: #000033;
        text-align: center;
        line-height: 26px;
        margin-right: 16px;
      }

      .optionText {
        max-width: 550px;
        font-size: 14px;
        color: #000033;
      }
    }
    .active {
      .option {
        background: #fcde84;
        color: #fff;
      }
    }
  }
}
</style>
